<template>
    <div id="box">
        <div id="bt">
            <span class="fa fa-chevron-left" id="left" @click="btnClick"></span>
            <span id="gouwuche">购物车</span>
            <span id="bianji" @click="editShow=!editShow">{{editShow?"完成":"编辑"}}</span>
        </div>

        <div id="shangjia">
            <input type="checkbox" 
            @change="checkAll"
             :checked="isCheckAll()"
              id="inp">

            <span class="biaoti"> <span class="fa  fa-angellist"></span>文轩现货</span>
        </div>
        <div id="zheng">
        <div v-for="s in good" id="wr">
            <input type="checkbox" id="che"
             v-model="s.check"
             @change="$forceUpdate()"
             >
             <router-link :to="'/genre/'+s.id">
            <img :src="s.img[0]" id="mg">
            </router-link>
            <router-link  :to="'/genre/'+s.id">
            <div id="f3">
                <p>{{s.name}}</p>
                <p id="copper">￥{{s.price}}</p>
                 </div>
                 </router-link>
                <div id="jj">
                <button @click="numberJian(s)">-</button><span>{{s.number}}</span><button @click="s.number++">+</button>
               </div>
            
            <div  id="ss">   
                <span id="delete" v-show="editShow">
            <button id="shan" @click="deleteClick(s._id)">删除</button>
                </span>
            </div>
            
        </div>
        </div>

             <div id="book">
                 <div id="amount">
                     <span id="he">合计：</span>
                     <span id="ji">￥{{he}}</span>
                 </div>
           
            <div id="bo">
                <span>结 算</span>
            </div>
            
           
        </div>
    

    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data: function () {
            return {
                good: [],
                editShow:false,
            }
        },

        computed: {
            ...mapState([
                "islogin"
            ]),
            zonghe:function(){
                // console.log(this.good);
                if(this.good.length>0){
                     return this.good.map(s=>{
                    // console.log(s.check)
                        if(!s.check){
                            return 0;
                        }
                        return s.price*s.number;
                    }).reduce((prev,total)=>{
                        return prev+total;

                    })
                }else{
                    return 0;
                }
               
                 
                
            },
            he:function(){
                return this.zonghe.toFixed(2)
               
            }

        },

        methods: {
            deleteClick :function(v){
                this.http.post("api/users/delete",{_id:v})
                .then(res=>{
                    this.reqShopCart();
                });
                
            },
            btnClick: function () {
                history.back("")
                // location.href="#/Paging"
            },

            isCategoryCheck:function(){
                return this.good.every(e=>{
                    return e.check;
                })
                
            },

            checkAll:function(e){
                this.good.forEach(s=>{
                    s.check = e.target.checked;
                })
                this.$forceUpdate();
            },
            isCheckAll:function(){
                return this.good.every(s=>{
                    return s.check;
                });
            },
            numberJian:function(s){
                if(s.number>1){
                    s.number--;
                }
            },
            reqShopCart(){
                this.http.post("/api/users/about")
                    .then(res => {
                        this.good = res.data.qwe
                        // console.log(this.good)
                    })
            }





        },
        mounted: function () {
            if (this.islogin) {
                this.reqShopCart();
            } else {
                // location.href="#/My"
            alert ("您还没登录， 请先登录" )
            
                


            }


        }

    }

</script>

<style scoped>
    button{
        
    }
    #jj{
        padding-top: 6vh;
        /*padding-right: 20vw;*/
    }
     img{
        width: 20%;
    }
    a{
        text-decoration:none;
        color: black;
        /*width: 50%;*/
    }
     #book {
        cursor: pointer;
        background-color: white;
        width: 100%;
        height: 50px;
        position: fixed;
        /*position: absolute;*/
        left: 0;
        bottom: 70px;
        border-top: solid 1px #eee;
    }
    #amount{
        text-align: center;
        line-height: 50px;
    }
    #he{
        font-size: 12px;
    }
    #ji{
        font-size: 17px;
        color: red;
    }

    #bo {
        background-color: red;
        width: 100px;
        height: 50px;
        position: absolute;
        right: 0;
        bottom: 0;
        text-align: center;
        line-height: 50px;
        color: white;
        font-size: 15px;
    }
    #box {
        
        height: calc(100vh - 120px);
        overflow:scroll; 
        background-color: #EEEEEE;
        /*position: relative;*/
    }

    #bt {
        
        width: 100%;
        position: fixed;
        line-height: 6vh;
        text-align: center;
        background-color: white;
        height: 40px;
    }

    #left {
        cursor: pointer;
        margin: 10px;
        float: left;
    }
    #zheng{
        padding-top: 70px;
    }

    #bianji {
        font-size: 14px;
        cursor: pointer;
        padding-right: 10px;
        float: right;
    }

    #shangjia {
        position: fixed;
        width: 100vw;
        /*height: 2vh;*/
        margin-top: 5vh;

        /*padding-top: 40px;*/
        border-top: solid 2px #eeeeee;
        background-color: #cccccc;
        height: 30px;
    }

    .biaoti {
        padding-left: 10vw;
        /*background-color: white;*/
    }

    #inp {
        margin: 8px;
    }
    img {
        width: 70px;
        height: 90px;
    }

    #wr {
        /*padding-top: 70px;*/
        height: 100px;
        display: flex;
        background-color: #F7F7F7;
        border-bottom: solid 3px #eeeeee;
    }

    #che {
        width: 10%;
    }

    #mg {
        width: 120%;
    }

    #f3 {
        /*flex: 1;*/
        /*width: 30%;*/
        padding-left: 5vw;
        font-size: 13px;
    }
    p{
        margin: 10px;
    }
    #copper{
        color: red;
    }
    #but{
        width: 18px;
        height: 18px;
        border: solid 1px #eeeeee;;
    }
    button{
        
        height: 10px;
        border: solid 1px #EEEEEE;
    }
    #delete{
        
        line-height: 100px;
        margin:30px;
    }
    #shan{
        /*padding-right: 10px;*/
        border: solid 1px #ccc;
        width: 16vw;
        height: 23vw;
        background-color: #999;
        font-size: 15px;
        color: white;
        position: absolute;
    }
    #ss{
        /*padding-right: 50px;*/
        position: absolute;
        right: 10vw;

    }
</style>